import React from 'react';
import { Route } from 'react-router-dom';
import { CSSTransition } from 'react-transition-group';
import 'animate.css';

export default function TransitionRoute(props) {
    const { component: Component, ...rest } = props;
    return (
        <Route {...rest}>
            {({ match }) => {
                // if (match) {
                //   return '匹配了'
                // }
                // return '没有匹配'
                return <CSSTransition in={match ? true : false} timeout={500} classNames={{
                    // enter: 'animated fast',
                    enter: 'animated slower fadeInRight',
                    // enterActive: 'fadeIn',
                    exit: 'animated fast fadeOutLeft',
                    // exitActive: 'fadeOut'
                }} mountOnEnter={true} unmountOnExit={true}>
                    <Component />
                </CSSTransition>
            }}
        </Route>
    )
}
